import { observable, action } from 'mobx';
import { WeaLocaleProvider } from 'ecCom';
import * as THEME_API from '../apis/theme';

const getLabel = WeaLocaleProvider.getLabel;

export default class IntroStore {
  @observable intro_step = {
    intro1: false,
    intro3: false,
    intro4: false,
    intro5: false,
    intro6: false,
  };

  @action
  onIntroStepChange(intro_step) {
    this.intro_step = Object.assign({}, this.intro_step, intro_step);
  }

  @action
  getPortalIntroInfo(portalThemeStore) {
    this.interval = window.setInterval(() => {
      const { topMenuObj, showFreqUseMenu = true, toolbarMoreMenu = [] } = portalThemeStore;
      const { topMenu = [] } = topMenuObj;
      if (topMenu.length > 0) {
        clearInterval(this.interval);
        THEME_API.getPortalIntroInfo().then((result) => {
          if (result == '1') {
            const onend = () => {
              this.onIntroStepChange({ intro1: false, intro3: false, intro4: false, intro5: false, intro6: false });
              portalThemeStore.onTopMenuVisibleChange(false);
              portalThemeStore.onFreqUseMenuVisibleChange(false);
              portalThemeStore.onToolbarMoreMenuVisibleChange(false);
              portalThemeStore.onAccountVisibleChange(false);
              THEME_API.setPortalIntroInfo({ firstLoad: '0' });
            };

            this.onIntroStepChange({ intro1: true });
            portalThemeStore.onTopMenuVisibleChange(true);

            portal_intro.onnextbuttonclick((step) => {
              if (step === 1) {
                this.onIntroStepChange({ intro1: false });
                portalThemeStore.onTopMenuVisibleChange(false);
                return true;
              } else if (step === 2) {
                if (showFreqUseMenu) {
                  this.onIntroStepChange({ intro3: true });
                  portalThemeStore.onFreqUseMenuVisibleChange(true);
                } else if (toolbarMoreMenu.length > 0) {
                  this.onIntroStepChange({ intro4: true });
                  portalThemeStore.onToolbarMoreMenuVisibleChange(true);
                } else {
                  this.onIntroStepChange({ intro5: true });
                  portalThemeStore.onAccountVisibleChange(true);
                  this.onIntroStepChange({ intro5: true });
                }
                return false;
              } else if (step === 3) {
                if (toolbarMoreMenu.length > 0) {
                  this.onIntroStepChange({ intro3: false, intro4: true });
                  portalThemeStore.onFreqUseMenuVisibleChange(false);
                  portalThemeStore.onToolbarMoreMenuVisibleChange(true);
                } else {
                  this.onIntroStepChange({ intro3: false, intro5: true });
                  portalThemeStore.onFreqUseMenuVisibleChange(false);
                  portalThemeStore.onAccountVisibleChange(true);
                  this.onIntroStepChange({ intro3: false, intro5: true });
                }
                return false;
              } else if (step === 4) {
                this.onIntroStepChange({ intro4: false, intro5: true });
                portalThemeStore.onToolbarMoreMenuVisibleChange(false);
                portalThemeStore.onAccountVisibleChange(true);
                this.onIntroStepChange({ intro4: false, intro5: true });
                return false;
              }
            });
            portal_intro.oncomplete(onend);
            portal_intro.onexit(onend);
            portal_intro.setOptions({
              steps: [
                {
                  element: '#portal-intro1',
                  intro: getLabel(503580, '点击这里可选择系统所有的应用模块'),
                },
                {
                  element: '#portal-intro2',
                  intro: getLabel(503581, '应用模块的下级菜单均在左侧菜单显示。点击这里可显示/隐藏左侧菜单'),
                },
                {
                  element: '#portal-intro3',
                  intro: getLabel(503582, '点这里，你可以将自己最常使用的操作菜单设置为快捷操作菜单'),
                },
                {
                  element: '#portal-intro4',
                  intro: getLabel(503584, '点击进入后台设置'),
                },
                {
                  element: '#portal-intro5',
                  intro: getLabel(503583, '换肤、修改密码、切换账号…  所有的个性设置都在这里'),
                },
              ],
            });
            portal_intro.refresh(); // 刷新队列
          }
        });
      }
    }, 500);
  }
}
